<template>
    <div v-if="dataInfo.lock" :class="'card_item'" @click="onActive(dataInfo)" :style="{'--background':`url(${dataInfo.img})`}">
        <div class="card_item--img"></div>
        <span>{{dataInfo.title}}</span>
    </div>
</template>
<script>
import lockImg from '@/assets/svg/fontApp/lock_icon.svg'
import { mapState, mapActions } from 'vuex';
export default {
    name: '',
    props: ['dataInfo'],
    inject: ['changeActive'],
    data() {
        return {
            lockImg: lockImg
        };
    },
    components: {},
    computed: {
        ...mapState('extend/cardTab', ['active']),
    },
    beforeMount() { },
    mounted() { },
    methods: {
        ...mapActions('extend/cardTab', [
            'changeData'
        ]),
        onActive(event) {
            this.changeActive("class", event)
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.card_item {
    width: 214px;
    height: calc(214px - 20px);
    background: #f8f8f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    box-shadow: 5px 5px 10px 0px rgba(55, 84, 170, 0.1),
        -5px -5px 10px 0px #ffffff;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    margin-top: 20px;
    &--img {
        background: var(--background) no-repeat;
        height: 160px;
        width: 160px;
        // border: 1px dashed #b5b5b5;
        background-size: 100% 100%;
        img {
            height: 158px;
            width: 158px;
        }
    }
    span {
        margin-top: 10px;
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #17233d;
    }
}
.card_item:not(:first-child) {
    margin-left: 20px;
}
</style>